import React from 'react'
import { Badge, TabBar } from 'antd-mobile'
import {NavLink} from "react-router-dom"
import {
  AppOutline,
  MessageOutline,
  MessageFill,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons'
import {useSelector} from "react-redux"
function My_footer({mainRouter}) {
 
  const shopcar_length = useSelector(state => state.reducer.shopCar.length)
  
  return   <TabBar>
  {mainRouter.map((item,index) => (
    <TabBar.Item key={index} icon={item.icon} title={<NavLink to={item.path}>{item.title}</NavLink>} />
  ))}
</TabBar>
  
  
  // <Tabbar>
  //     {
  //       mainRouter.map((item,index)=>{
  //              return <Tabbar.Item badge={item.content?{content:shopcar_length}:{}} key={index} icon={item.icon}>
  //                  <NavLink to={item.path}>{item.title}</NavLink>
  //              </Tabbar.Item>
  //       })
  //     }
  // </Tabbar>
}

export default My_footer